<template>
  <div class="NetworkAdmin">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="网点名称" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['networkName']" />
            </a-form-item>
          </a-col>
          <a-col :span="16" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="findPageListByCondition">查询</a-button>
            <a-button type="dashed" style="margin-left:1%" @click="listExport()">导出</a-button>
            <a-button
              style="background:rgb(0,204,102);color:white;margin-left:2%"
              @click="showModal"
            >新增</a-button>

            <!-- //新增网点的弹出层 -->
            <a-modal title="新增网点" :visible="visible" @ok="handleOk" @cancel="handleCancel">
              <a-form-item
                label="网点名称"
                :label-col="{ span: 4 }"
                :wrapper-col="{ span: 12, offset: 1}"
              >
                <a-input
                  placeholder="请输入网点名称"
                  v-decorator="[
          'networkNameAdd',
          {rules: [{ required: true, message: '请输入网点名称!' }]}
        ]"
                />
              </a-form-item>
            </a-modal>
          </a-col>
        </a-row>
      </a-form>
    </a-card>

    <a-card style="margin-top:2%">
      <a-table
        style="margin-top:2%"
        :columns="columns"
        :dataSource="data"
        @change="handleTableChange"
        :pagination="pagination"
        :bordered="true"
        :rowKey="record => record.id"
      >
        <template slot="someDigits" slot-scope="text,record">
          <!-- //如果点位数是0就是正常颜色 如果是1就是蓝色 -->
          <span
            :class="record.posCount==0?'':'blue'"
            @click="record.posCount==0?'':getPointModal(text,record)"
          >{{record.posCount}}</span>
        </template>

        <template slot="deviceNumber" slot-scope="text,record">
          <span
            :class="record.devCount==0?'':'blue'"
            @click="record.devCount==0?'':showFacilityModal(text,record)"
          >{{record.devCount}}</span>
        </template>

        <template slot="operate" slot-scope="text,record">
          <span class="blue" @click="showPointBinding(text,record)">点位绑定管理</span>
          <span class="red" @click="record.posCount==0?delConfirm(text,record):delConfirmNO()">删除</span>
        </template>
      </a-table>
    </a-card>

    <a-modal
      title="查看点位"
      :visible="getPointVisible"
      @ok="getPointOk"
      @cancel="getPointCancel"
      :width="700"
      :footer="null"
    >
      <a-table
        style="margin-top:2%"
        :columns="columnsGetPoint"
        :dataSource="dataGetPoint"
        :pagination="false"
        :bordered="true"
        :rowKey="record => record.posId"
      >
        <template slot="number" slot-scope="text,record,index">
          <span>{{index+1}}</span>
        </template>
        <template slot="pointFacilityNumber" slot-scope="text,record">
          <span
            :class="record.posCount==0?'':'blue'"
            @click="record.posCount==0?'':getFacilityModal(text,record)"
          >{{record.posCount}}</span>
        </template>
      </a-table>
    </a-modal>
    <a-modal
      title="点位绑定管理"
      :visible="PointBindingvisible"
      @ok="isBinding=='绑定'?PointBindingOk():PointOutOk()"
      @cancel="PointBindingCancel"
      :width="700"
      :okText="isBinding"
    >
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="12">
            <a-form-item label="点位名称" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input placeholder="请输入" v-decorator="['pointName']" />
            </a-form-item>
          </a-col>
          <a-col :span="12" style="text-align:right;margin-top:1%">
            <a-button type="primary" @click="pointFindBind()">查询</a-button>
          </a-col>
        </a-row>
      </a-form>
      <a-tabs defaultActiveKey="1" @change="tbsChange">
        <a-tab-pane tab="已绑定" key="1">
          <a-table
            style="margin-top:2%"
            :columns="columnsPoint"
            :dataSource="dataPoint"
            :rowSelection="{selectedRowKeys: selectedKeysPoint,onChange: onSelectChangePoint}"
            :pagination="false"
            :bordered="true"
            :rowKey="record => record.id"
          ></a-table>
        </a-tab-pane>
        <a-tab-pane tab="未绑定" key="2" forceRender>
          <a-table
            style="margin-top:2%"
            :columns="columnsNotPoint"
            :dataSource="dataNotPoint"
            :rowSelection="{selectedRowKeys: selectedRowKeys,onChange: onSelectChange}"
            :pagination="false"
            :bordered="true"
            :rowKey="record => record.id"
          ></a-table>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
    <a-modal
      :title="getFacilityTitle"
      :visible="getFacilityVisible"
      @ok="getFacilityOk"
      @cancel="getFacilityCancel"
      :footer="null"
    >
      <a-table
        style="margin-top:2%"
        :columns="columnsGetFacility"
        :dataSource="dataGetFacility"
        :pagination="false"
        :bordered="true"
        :rowKey="record => record.devId"
      >
        <template slot="number" slot-scope="text,record,index">
          <span>{{index+1}}</span>
        </template>
      </a-table>
    </a-modal>
    <a-modal
      title="查看设备"
      :visible="showFacilityVisible"
      @ok="showFacilityOk"
      @cancel="showFacilityCancel"
      :footer="null"
    >
      <a-table
        style="margin-top:2%"
        :columns="columnsShowFacility"
        :dataSource="dataShowFacility"
        :pagination="false"
        :bordered="true"
        :rowKey="record => record.id"
      >
        <template slot="number" slot-scope="text,record,index">
          <span>{{index+1}}</span>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script>
import moment from "moment";
const columns = [
  {
    title: "网点编号",
    dataIndex: "branchCode",
    key: "networkNumber",
    scopedSlots: { customRender: "networkNumber" },
    align: "center"
  },
  {
    title: "网点名称",
    dataIndex: "branchName",
    key: "networkName",
    scopedSlots: { customRender: "networkName" },
    align: "center"
  },
  {
    title: "点位数",
    dataIndex: "posCount",
    key: "someDigits",
    scopedSlots: { customRender: "someDigits" },
    align: "center"
  },
  {
    title: "设备数",
    key: "devCount",
    dataIndex: "deviceNumber",
    scopedSlots: { customRender: "deviceNumber" },
    align: "center"
  },
  {
    title: "操作",
    scopedSlots: { customRender: "operate" },
    key: "operate",
    align: "center"
  }
];

const data = [
  {
    key: 1
  }
];

const columnsPoint = [
  // {
  //   title: "选择",
  //   dataIndex: "select",
  //   key: "select",
  //   scopedSlots: { customRender: "select" },
  //   align: "center"
  // },
  {
    title: "点位名称",
    dataIndex: "posName",
    key: "pointName",
    scopedSlots: { customRender: "pointName" },
    align: "center"
  },
  {
    title: "点位地址",
    key: "pointSite",
    dataIndex: "address",
    scopedSlots: { customRender: "pointSite" },
    align: "center"
  }
];

const dataPoint = [
  {
    key: 1
  }
];

const columnsNotPoint = [
  // {
  //   title: "选择",
  //   dataIndex: "select",
  //   key: "select",
  //   scopedSlots: { customRender: "select" },
  //   align: "center"
  // },
  {
    title: "点位名称",
    dataIndex: "posName",
    key: "pointName",
    scopedSlots: { customRender: "pointName" },
    align: "center"
  },
  {
    title: "点位地址",
    key: "pointSite",
    dataIndex: "address",
    scopedSlots: { customRender: "pointSite" },
    align: "center"
  }
];

const dataNotPoint = [
  {
    key: 1
  }
];

const columnsGetPoint = [
  {
    title: "序号",
    dataIndex: "number",
    key: "number",
    scopedSlots: { customRender: "number" },
    align: "center"
  },
  {
    title: "点位名称",
    dataIndex: "posName",
    key: "pointName",
    scopedSlots: { customRender: "pointName" },
    align: "center"
  },
  {
    title: "点位地址",
    key: "pointSite",
    dataIndex: "address",
    scopedSlots: { customRender: "pointSite" },
    align: "center"
  },
  {
    title: "点位设备数",
    key: "pointFacilityNumber",
    dataIndex: "pointFacilityNumber",
    scopedSlots: { customRender: "pointFacilityNumber" },
    align: "center"
  }
];

const dataGetPoint = [
  {
    key: 1
  }
];

const columnsGetFacility = [
  {
    title: "序号",
    dataIndex: "number",
    key: "number",
    scopedSlots: { customRender: "number" },
    align: "center"
  },
  {
    title: "设备编号",
    dataIndex: "devCode",
    key: "facilityNumber",
    scopedSlots: { customRender: "facilityNumber" },
    align: "center"
  }
];

const dataGetFacility = [
  {
    key: 1
  }
];

const columnsShowFacility = [
  {
    title: "序号",
    dataIndex: "number",
    key: "number",
    scopedSlots: { customRender: "number" },
    align: "center"
  },
  {
    title: "设备编号",
    dataIndex: "devCode",
    key: "facilityNumber",
    scopedSlots: { customRender: "facilityNumber" },
    align: "center"
  }
];

const dataShowFacility = [
  {
    key: 1
  }
];

export default {
  name: "NetworkAdmin",
  data() {
    return {
      form: this.$form.createForm(this),
      dateFormat: "YYYY/MM/DD",
      monthFormat: "YYYY/MM",
      columns,
      data: [],
      visible: false,
      PointBindingvisible: false,
      PointBindingLoading: false,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["10", "20", "30", "40"], //每页条数选择器
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        }, // 总数展示
        pageSize: 10, //每页条数
        defaultCurrent: 1, //默认当前页
        current: 1, //当前页
        total: 50 //数据总条数
      },
      columnsPoint,
      dataPoint: [],
      rowSelectionPoint: {
        columnTitle: "选择"
      },
      columnsNotPoint,
      dataNotPoint: [],
      isBinding: "解绑",
      getPointVisible: false,
      columnsGetPoint,
      dataGetPoint: [],
      columnsGetFacility,
      dataGetFacility: [],
      getFacilityVisible: false,
      columnsShowFacility,
      dataShowFacility: [],
      showFacilityVisible: false,
      getFacilityTitle: "",
      selectedRowKeys: [],
      selectedKeysPoint: []
    };
  },
  computed: {},
  methods: {
    handleReset() {
      this.form.resetFields();
    },
    onSelectChangePoint(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedKeysPoint = selectedRowKeys;
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    tbsChange(checked) {
      console.log(checked);
      if (checked == 1) {
        this.isBinding = "解绑";
        this.pointFindBind(this.pointFindBindId);
      }
      if (checked == 2) {
        this.isBinding = "绑定";
        this.getBind();
      }
    },
    handleMenuClick(e) {
      console.log("click", e);
    },
    handleMenuClick1(a) {
      console.log("click", a);
    },
    moment,
    onChange(dates, dateStrings) {
      console.log("From: ", dates[0], ", to: ", dates[1]);
      console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
    },
    showModal() {
      this.visible = true;
    },
    handleOk(e) {
      this.visible = false;
      this.save();
    },
    handleCancel(e) {
      console.log("取消");
      this.visible = false;
    },
    showFacilityModal(text, record) {
      this.showFacilityVisible = true;
      this.findByBranchId(record.id);
    },
    showFacilityOk(e) {
      this.showFacilityVisible = false;
    },
    showFacilityCancel(e) {
      console.log("取消");
      this.showFacilityVisible = false;
    },
    showPointBinding(text, record) {
      this.PointBindingvisible = true;
      this.pointFindBindId = record.id;
      this.pointFindBind(this.pointFindBindId);
    },
    PointBindingOk(e) {
      this.PointBindingvisible = false;
      this.bindPos(this.pointFindBindId);
    },
    PointOutOk(e) {
      this.PointBindingvisible = false;
      this.unbindPos(this.pointFindBindId);
    },
    PointBindingCancel(e) {
      console.log("取消");
      this.PointBindingvisible = false;
    },
    getPointModal(text, record) {
      this.getPointVisible = true;
      this.findPosListByBranchId(record.id);
    },
    getPointOk(e) {
      this.getPointVisible = false;
    },
    getPointCancel(e) {
      console.log("取消");
      this.getPointVisible = false;
    },
    getFacilityModal(text, record) {
      this.getFacilityVisible = true;
      this.deviceBound(record.posId);
      this.getFacilityTitle = record.posName + "的设备";
    },
    getFacilityOk(e) {
      this.getFacilityVisible = false;
    },
    getFacilityCancel(e) {
      console.log("取消");
      this.getFacilityVisible = false;
    },
    delConfirm(text, record) {
      var that = this;
      this.delId = record.id;
      this.$confirm({
        title: "删除网点",
        content: "您确定要删除这个网点吗？",
        okText: "确定",
        cancelText: "取消",
        iconType: "close-circle",
        onOk() {
          that.delete(that.delId);
          console.log("确定");
        },
        onCancel() {
          console.log("取消");
        }
      });
    },
    delConfirmNO() {
      this.$message.error("有绑定点位数,暂不能删除");
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.handleReset();
      this.findPageListByCondition();
    },
    // 查询设备列表
    findPageListByCondition() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/branch/findPageListByCondition", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          branchName: values.networkName
        })
        .then(response => {
          // console.log(response);
          this.data = response.data.data.list;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 网点下设备的信息
    findByBranchId(branchesId) {
      this.axios
        .post(this.baseUrl + "/branch/findByBranchId", {
          loginToken: this.$store.state.loginToken,
          branchesId: branchesId
        })
        .then(response => {
          // console.log(response);
          this.dataShowFacility = response.data.data;
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 查询被绑定的设备
    deviceBound(posId) {
      this.axios
        .post(this.baseUrl + "/posDevice/getBind", {
          loginToken: this.$store.state.loginToken,
          posId: posId
        })
        .then(response => {
          // console.log(response);
          this.dataGetFacility = response.data.data;
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 查询绑定点位
    pointFindBind(branchId) {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/pos/findBind", {
          loginToken: this.$store.state.loginToken,
          branchId: branchId,
          posName: values.pointName
        })
        .then(response => {
          // console.log(response);
          this.dataPoint = response.data.data;
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 网点下点位的信息
    findPosListByBranchId(branchId) {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/branch/findPosListByBranchId", {
          loginToken: this.$store.state.loginToken,
          branchId: branchId,
          posName: values.pointName
        })
        .then(response => {
          // console.log(response);
          this.dataGetPoint = response.data.data;
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 查询未被绑定的点位
    getBind() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/pos/getUnbind", {
          loginToken: this.$store.state.loginToken
        })
        .then(response => {
          // console.log(response);
          this.dataNotPoint = response.data.data;
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 绑定点位
    bindPos(branchId) {
      console.log(this.selectedRowKeys);
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/branch/bindPos", {
          loginToken: this.$store.state.loginToken,
          branchId: branchId,
          posIds: this.selectedRowKeys
        })
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            this.$message.info("绑定点位成功");
            this.findPageListByCondition();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 解绑点位
    unbindPos(branchId) {
      console.log(this.selectedRowKeys);
      var values = this.form.getFieldsValue();
      var param = {
        loginToken: this.$store.state.loginToken,
        branchId: branchId,
        posIds: this.selectedKeysPoint
      };
      this.axios
        .delete(this.baseUrl + "/branch/unbindPos", { data: param })
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            this.$message.info("解绑点位成功");
            this.findPageListByCondition();
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 新建网点
    save() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(this.baseUrl + "/branch/save", {
          loginToken: this.$store.state.loginToken,
          branchName: values.networkNameAdd
        })
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            this.findPageListByCondition();
            this.$message.info("新增网点成功");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 删除网点
    delete(id) {
      var values = this.form.getFieldsValue();
      var param = { loginToken: this.$store.state.loginToken, branchId: id };
      this.axios
        .delete(this.baseUrl + "/branch/delete", { data: param })
        .then(response => {
          console.log(response);
          if (response.data.code == 0) {
            this.findPageListByCondition();
            this.$message.info("删除网点成功");
          }
        })
        .catch(error => {
          console.log(error);
        });
    },

    // 导出网点
    listExport() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(
          this.baseUrl + "/branch/export",
          {
            loginToken: this.$store.state.loginToken,
            branchName: values.networkName
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          console.log(response);
          if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "网点管理表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  created() {
    this.findPageListByCondition();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.NetworkAdmin {
  width: 100%;
}
</style>
